<!DOCTYPE html>
<html>

<head>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Easy form validation with HTML5</title>

	<!--<link rel="stylesheet" type="text/css" href="styles.css">-->
	<style type="text/css">
		
		*{
			padding: 0;
			margin: 0;
		}

		html{
			background-color: #f3f3f3;
			font: normal 16px sans-serif;
			color:#555;
		}

		nav{
			max-width: 800px;
			margin: 80px auto 60px;
			text-align: center;
			font-size: 18px;
			color: #c0c0c0;
		}

		nav a{
			display: inline-block;
			margin: 0px 14px;
			text-decoration: none;
			color: #6e6e6e;
			font-weight: bold;
			font-size: 16px;
		}

		nav a.active{
			color: #6CAEE0;
		}

		form{
			box-sizing: border-box;
			width: 100%;
			max-width: 500px;
			margin: 50px auto;
			padding: 55px;

			background-color:  #ffffff;
			box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);

			font: normal 14px sans-serif;
			text-align: center;
		}

		form .form-row{
			text-align: left;
			max-width: 315px;
			margin: 25px auto 0;
		}

		form .form-title-row{
			margin: 0 auto 40px;
		}

		form h1{
			display: inline-block;
			box-sizing: border-box;
			color: #4C565E;
			font-size: 24px;
			padding: 0 0 12px 0;
			margin: 0;
			border-bottom: 2px solid #6CAEE0;
		}

		form .form-row > label span{
			display: block;
			box-sizing: border-box;
			color:  #5f5f5f;
			padding: 0 0 12px;
			font-weight: bold;
		}

		form input{
			color:  #5f5f5f;
			box-sizing: border-box;
			box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
			padding: 12px 18px;
			border: 1px solid #dbdbdb;
		}

		form input[type=text],
		form input[type=email],
		form input[type=password],
		form textarea{
			max-width: 400px;
			width: 100%;
		}

		form input[type=number]{
			max-width: 100px;
		}

		form input[type=radio],
		form input[type=checkbox]{
			box-shadow: none;
			width: auto;
		}

		form textarea{
			color:  #5f5f5f;
			box-sizing: border-box;
			box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
			padding: 12px 18px;
			border: 1px solid #dbdbdb;
			resize: none;
			min-height: 80px;
		}

		form select{
			background-color: #ffffff;
			color:  #5f5f5f;
			box-sizing: border-box;
			width: 240px;
			box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
			padding: 12px 18px;
			border: 1px solid #dbdbdb;
		}

		form .form-radio-buttons > div{
			margin-bottom: 10px;
		}

		form .form-radio-buttons label span{
			margin-left: 8px;
			color:  #5f5f5f;
		}

		form .form-radio-buttons input{
			width: auto;
		}

		form button{
			border-radius: 2px;
			background-color:  #6caee0;
			color: #ffffff;
			font-weight: bold;
			box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
			padding: 14px 22px;
			border: 0;
			margin-top: 15px;
		}

		p.explanation{
			padding: 15px 20px;
			line-height: 1.5;
			background-color: #FFFFE0;
			font-size: 13px;
			text-align: center;
			margin-top: 40px;
			color: #6B6B48;
			border-radius: 3px;
			border-bottom: 2px solid #ECECD0;
		}

		/*	Making the form responsive. Remove this media query
			if you don't need the form to work on mobile devices. */

		@media (max-width: 600px) {

			form{
				padding: 30px;
			}

		}

	</style>

</head>

<body>

	<nav>
		<a href="index.html">Basics</a>•
		<a class="active" href="limits.html">Limits</a>•
		<a href="styling.html">Styling</a>•
		<a href="tooltips.html">Tooltips</a>•
		<a href="patterns.html">Patterns</a>
	</nav>

	<form action="">

		<div class="form-title-row">
			<h1>Limits</h1>
		</div>

		<div class="form-row">
			<label>
				<span>Name</span>
				<input type="text" name="name" required  maxlength="15">
			</label>
		</div>

		<div class="form-row">
			<label>
				<span>Comment</span>
				<textarea name="textarea" required maxlength="144"></textarea>
			</label>
		</div>


		<div class="form-row">
			<label>
				<span>Age</span>
				<input type="number" name="age" min="18" required>
			</label>
		</div>

		<div class="form-row">
			<button type="submit">Submit Form</button>
		</div>

		<p class="explanation">Here, we've set a max length on the name and comment fields, and a min restriction on the age.</p>

	</form>

</body>

</html>
